<template>
    <div>
        <ul>
            <li ref="li1">北京</li>
            <li ref="li2">天津</li>
            <li ref="li3">上海</li>
            <li ref="li4">深圳</li>
        </ul>
        <input type="text" ref="input1"> <br><br>
        <button @click="GetInput">获取内容并输出</button>
        <button @click="GetSH">获取上海标签</button>
    </div>
</template>

<script lang="ts" setup name="RefAttribute">
import {ref} from 'vue'
let li1=ref();
let li2=ref();
let li3=ref();
let li4=ref();
let input1= ref();

let name=ref('张三')
let age= ref(18)

function GetSH(){
    console.log(li1.value)
    console.log(li2.value)
    console.log(li3.value)
    console.log(li4.value)
}

function GetInput(){
    console.log(input1.value.value)
}

//将name， age 导出（对外提供使用）
defineExpose({name,age})
</script>